<template>
  <div class="sidebar">
    <!-- 如果不是主页,则不显示此组件 -->
    <SidebarHeader v-if="showHeader" />
    <!-- 搜索框 -->
    <div class="search">
      
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <!-- 标签云 -->
    <Tag />
    <!-- 排行 -->
    <div class="paihang">
      <h2 class="hometitle">点击排行</h2>
      <ul>
        <li
          class="topArticle"
          v-for="(item,index) in topArticle"
          :key="index"
          @click="toArticleDetail(item.articleId)"
        >
          <b>
            <a target="_blank">{{item.title}}...</a>
          </b>
          <p>
            <i>
              <img src="/static/images/t02.jpg" />
            </i>
            {{item.brief}}...
          </p>
        </li>
      </ul>
    </div>

    <!-- 站内信 -->

    <!-- 友链 -->
    <div class="links">
      <h2 class="hometitle">友情链接</h2>
      <ul>
        <li>
          <a href="http://www.yangqq.com" title="XXX个人博客">XXX个人博客</a>
        </li>
      </ul>
    </div>
    <!-- 官方微信 -->
    <div class="weixin">
      <h2 class="hometitle">官方微信</h2>
      <ul>
        <img src="/static/images/wx.jpg" />
      </ul>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState, mapActions } from "vuex";
import Tag from "./page/tag";
import SidebarHeader from "./page/sidebarHeader";

export default {
  data() {
    return {
      input:'',
      topArticle: {
        title: "",
        brief: "",
        articleId: ""
      }
    };
  },
  components: {
    Tag,
    SidebarHeader
  },
  computed: {
    ...mapState({
      showHeader: state => state.showHeader
    })
  },
  created() {
    this.getTopArticle();
  },
  methods: {
    // 获取排行前文章
    getTopArticle() {
      this.$http({
        url: this.$http.adornUrl("/api/article/view/list"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.topArticle = data.data;
        }
      });
    },
    toArticleDetail(id) {
      this.$router.push({ name: "_detail", query: { articleId: id } });
    }
  }
};
</script>
<style lang="scss">
  

.topArticle {
  cursor: pointer;
}
</style>
